import React from 'react';
import { Modal, Row, Col, Button } from 'antd';
import Page from 'components/common/Page';
import { model } from 'utils/model';
import Header from './Header';
import AddModal from './Modals/AddModal';
import EditModal from './Modals/EditModal';
import Aside from './Aside';
import styles from './index.less';

console.log(styles);
const height = document.body.clientHeight;
const asideStyle = {
  height: `${height - 210}px`,
  backgroundColor: '#fff',
  padding: '10px',
  borderRadius: '6px',
  position: 'relative',
  overflow: 'scroll' };

@model('menuManage')
class LogList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visAdd: false,
      menuId: ''
    };
    this.settingHandler = this.settingHandler.bind(this);
    this.updateParent = this.updateParent.bind(this);
    this.del = this.del.bind(this);
  }

  del(params) {
    const {del, loading} = this.props;
    Modal.confirm({
      title: '你确定要执行此操作？',
      cancelText: '取消',
      okText: '确定',
      confirmLoading: loading.del,
      onOk() {
        del(params);
      }
    });
  }


  settingHandler(type, value, record = {}) {
    this.setState({
      record,
      [type]: value
    });
  }
  updateParent(params){
    this.setState(params);
  }

  render() {
    const { edit, add, loading, del,
    menuTree, getList, menuDetails = {}, getMenuInfo } = this.props;
    const { visAdd, visEdit, menuId } = this.state;
    const addProps = {
      record: {},
      getList,
      loading: loading.add,
      onCancel: () => this.setState({ 'visAdd': false }),
      onOK: add
    };
    const editProps = {
      record: menuDetails,
      getList,
      loading: loading.add,
      onCancel: () => this.setState({ 'visEdit': false }),
      onOK: edit
    };
    const asideProps = {
      updateParent: this.updateParent,
      getMenuInfo,
      menuTree
    };
    const headerProps = {
      menuDetails
    };

    

    return (
      <Page>
        <div>
          <Row>
            <Col span="4" style={asideStyle}>
              <Aside {...asideProps} />
            </Col>
            <Col span="20" className={styles.container}>
              <Header {...headerProps} />
              <div className={styles.wrap}>
                <Button 
                  type="primary"
                  onClick={() => { this.setState({ 'visAdd': true }); }}
                 >新增</Button>
                <Button 
                  type="primary"
                  style={{marginLeft: 20}}
                  disabled={!menuId}
                  onClick={() => { this.setState({ 'visEdit': true }); }}
                 >编辑</Button>
                <Button 
                  loading={loading.del}
                  style={{marginLeft: 20}}
                  disabled={!menuId}
                  onClick={() => del(menuDetails)}
                 >删除</Button>
              </div>
            </Col>
          </Row>
          { visAdd && <AddModal {...addProps} /> }
          { visEdit && <EditModal {...editProps} /> }
        </div>
      </Page>
    );
  }
}

export default LogList;
